<template>
    <div>
        <div class="artwork-modal__modal">
            <section class="modal-author">
                <section class="stage-flex-container"
                         style="justify-content: flex-start; align-items: stretch; align-self: auto;">

                    <div class="avatar-wrapper is-round"
                         style="flex: 0 0 60px; width: 60px; height: 60px; margin-right: 20px; padding-bottom: 0px;">
                        <section class="avatar-wrapper__img-wrapper"
                                 style="width: 60px; height: 60px; background: rgb(255, 255, 255);"><!---->
                            <img :src="imgUrl+workInfo.userImg"
                                 @click="gotoUser(workInfo)"
                                 class="avatar-wrapper__avatar border"
                                 style="cursor: pointer;width: 60px; height: 60px; border-color: rgb(236, 236, 236);">
                        </section>
                    </div>
                    <div class="modal-author__author-info">
                        <p class="author-p">{{workInfo.username}}</p>
                        <div>
                            <div role="slider" aria-valuenow="5"
                                 aria-valuemin="0" aria-valuemax="5" tabindex="0"
                                 class="el-rate modal-author__author-credit">
                                        <span class="el-rate__item" style="cursor: auto;">
                                            <i class="el-rate__icon el-icon-star-on"
                                               style="color: rgb(247, 186, 42);">
                                            </i>
                                        </span>
                            </div>
                            <span>共有 {{workComments.length}} 条评价</span>
                        </div>
                    </div>
                </section>
                <section class="modal-author__author-operator stage-flex-container"
                         style="justify-content: flex-start; align-items: center; align-self: auto;">
                    <button type="button"
                            class="stage-button modal-author__user-subscribe stage-button--warning stage-button--small">
                        <span>关注</span>
                    </button>
                </section>
            </section>
            <section class="artwork-modal__artwork">
                <div class="pin-wrapper" style="height: auto;" v-if="isLike === 0">
                            <span class="artwork-modal__operator"
                                  style="width: 80px;border-radius: 20px">
                                <span>
                                    <i @click="likes(workInfo)" class="icon-favorites" style="cursor: pointer"></i>
                                </span>
                                <div>{{likeCount}}</div>
                            </span>
                </div>
                <div class="pin-wrapper" style="height: auto;" v-else>
                    <span class="artwork-modal__operator"
                          style="width: 80px;border-radius: 20px;background-color: #adb3fb">
                                <span>
                                    <i @click="unlikes(workInfo)" class="icon-favorites" style="cursor:pointer;"></i>
                                </span>
                                <div>{{likeCount}}</div>
                            </span>
                </div>
                <div v-if="workInfo.workFileType === 1" class="artwork-modal__artwork-img stage-img is-hoverable">
                    <img :src="imgUrl+workInfo.workFilename"
                         class="stage-img__img is-hoverable is-responsive"
                         style="border-color: rgb(236, 236, 236); border-radius: 20px;">
                </div>
                <div v-else class="artwork-modal__artwork-img stage-img is-hoverable">
                    <video :poster="workInfo.poster" :controls="true"
                           :src="imgUrl+workInfo.workFilename"
                           class="stage-img__img is-hoverable is-responsive"
                           style="border-color: rgb(236, 236, 236); border-radius: 0px;">
                    </video>
                </div>
                <section class="artwork-modal__sidebar">
                    <p class="artwork-modal__copyright-tips">
                            <span>
                                <span class="artwork-modal__created-at">
                                    上传时间：{{$moment(workInfo.workDate).format('YYYY-MM-DD')}}
                                </span>
                                作品版权归原作者所有，未经授权不得进行转载或使用。

                                    </span>

                    </p>
                    <p class="artwork-modal__copyright-tips">
                        <span style="font-size: 14px;">作品标题 <span style="color: #000000">{{workInfo.workName}}</span>
                        </span></p>
                    <section class="artwork-modal__tag-more-artwork-wrapper">
                        <section
                                style="justify-content: flex-start; align-items: stretch; align-self: auto; flex-direction: row; flex: 1 1 0%;">
                            <section class="is-vertical"
                                     style="justify-content: flex-start; align-items: stretch; align-self: auto;">
                                <div class="artwork-modal__sidebar-title">
                                    作品标签
                                    <el-tag class="category-tag">
                                        {{workInfo.categoryName}}
                                    </el-tag>
                                </div>
                            </section>
                        </section>
                    </section>
                </section>
            </section>
            <div class="works-comment">
                <div class="comment-form clearfix">
                    <el-input class="comment-form" v-model="comment" placeholder="立即评论，抢占前排~~"></el-input>
                    <div class="comment-btn" @click="addComment(workInfo)">评论</div>
                </div>
                <div class="comment-num"
                >全部评论(
                    <span>{{workComments.length}}</span>
                    )
                </div>
                <div v-for="(com,index) in workComments" :key="index">
                    <div class="comment-li clearfix">
                        <img :src="imgUrl+com.userImg"
                             @click="gotoUser(com)"
                             style="border-radius: 50%;cursor: pointer" class="c-face-img-con c-face-img user-avatar">
                        <div class="comment-wrap">
                            <div class="user-name">{{com.username}}</div>
                            <div class="user-content">{{com.content}}</div>
                            <div class="comment-info">
                                <div class="comment-time">{{com.createdTime}}</div>
                                <div class="like-num">
                                    <i class="icon-favorites"></i>
                                    <span>{{com.contentPraise}}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
  import {addWorkComment, getWorkComment, getWorkInfoById} from "@/assets/api/workInfoApi";
  import {like, selectLike, unlike} from "@/assets/api/likesApi";
  import {getCurrentInstance, onBeforeMount, ref} from "vue";

  const imgUrl = getCurrentInstance()?.appContext.config.globalProperties.$imgUrl
  import {useRouter, useRoute} from "vue-router";
  import {ElMessage} from "element-plus";
  
  const workInfo = ref({});
  const workComments = ref([]);
  const comment = ref('');
  const workLike = ref({});
  const likeCount = ref(0);
  const isLike = ref(0);
  const router = useRouter();
  const route = useRoute();

  const gotoUser = (work) => {
    router.push({path: '/demandUserPage', query: {id: work.userId}});
  };
  const getWorkDetail = () => {
    let obj = {};
    obj.workId = route.query.id;
    getWorkComment(obj).then(res => {
      workComments.value = res.data;
    })
  };
  const detailInfoFun = (id) => {
    const data = {};
    data.workId = id;
    getWorkInfoById(data).then((res) => {
      workInfo.value = res.data;
    });
  };
  const addComment = (work) => {
    let data = {};
    data.userId = localStorage.userId;
    data.workId = work.workId.value;
    data.content = comment.value;
    addWorkComment(data).then((res) => {
      if (res.code === 200) {
        comment.value = '';
        ElMessage.success(res.message);
        getWorkDetail();
      }

    })
  };
  const likes = (workInfo) => {
    let data = {};
    data.objId = workInfo.workId.value;
    data.userId = localStorage.userId.value;
    data.type = 1;
    like(data).then(res => {
      ElMessage.success(res.message);
      getWorkLike();
    })
  };
  const unlikes = (workInfo) => {
    let data = {};
    data.objId = workInfo.workId.value;
    data.userId = localStorage.userId;
    data.type = 1;
    unlike(data).then(res => {
      ElMessage.success(res.message);
      getWorkLike();
    })
  };
  const getWorkLike = () => {
    let data = {};
    data.objId = route.query.id;
    data.userId = localStorage.userId;
    data.type = 1;
    selectLike(data).then(res => {
      if (res.code === 200) {
        isLike.value = res.data.isLike
        likeCount.value = res.data.countLikes
      }
    })
  };

  onBeforeMount(() => {
    detailInfoFun(route.query.id);
    getWorkDetail();
    getWorkLike();
  });

</script>

<style scoped>
    @import "../../assets/fonts/iconfont.css";

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .panel img {
        width: 300px;
        height: 400px;
        padding: 70px;
    }

    .artwork-modal__modal {
        position: relative;
        width: 950px;
        height: auto;
        border-radius: 8px;
        margin: auto;
    }

    .modal-author {
        padding: 20px 30px;
        margin-bottom: 20px;
        border-radius: 20px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .stage-flex-container {
        display: flex;
    }

    .avatar-wrapper {
        position: relative;
        overflow: hidden;
        margin-right: 10px;
        transition: .5s;
        box-sizing: content-box;
    }

    .avatar-wrapper__img-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .avatar-wrapper.is-round .avatar-wrapper__img-wrapper, .avatar-wrapper.is-round img {
        border-radius: 100%;
    }

    .avatar-wrapper__avatar.border {
        border: 1px solid transparent;
    }

    .avatar-wrapper__avatar {
        width: 100%;
        opacity: 1;
    }

    .modal-author__author-info {
        display: flex;
        width: auto;
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: center;
        color: #707070;
    }

    .modal-author__author-credit {
        margin-top: 5px;
        display: inline-block;
    }

    .el-rate {
        height: 20px;
        line-height: 1;
    }

    .el-rate__item {
        font-size: 0;
        vertical-align: middle;
    }

    .stage-flex-container {
        display: flex;
    }

    .modal-author__author-operator button {
        margin-left: 15px;
        width: 94px;
        height: 30px;
        padding: 4px 15px;
        border-radius: 20px;
        border: 1px solid transparent;
    }

    .stage-button--warning {
        color: #fff;
        background-color: #adb3fb;
        border-color: #9eb0fb;
    }

    .stage-button--small {
        padding: 7px 18px;
        font-size: 12px;
        border-radius: 4px;
    }

    .stage-button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid #dcdfe6;
        appearance: none;
        text-align: center;
        outline: none;
        margin: 0;
        transition: .1s;
        user-select: none;
        padding: 10px 24px;
        font-size: 14px;
        border-radius: 4px;
    }

    a {
        text-decoration: none;
    }

    .author-p {
        color: #222222;
    }

    .artwork-modal__artwork-img {
        border-top-left-radius: 4px;
    }

    .stage-img {
        position: relative;
        width: 100px;
    }

    .artwork-modal__artwork-img-wrapper img {
        width: 100%;
        cursor: pointer;
        border-top-left-radius: 4px;
    }

    .artwork-modal__artwork {
        background: #fff;
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        position: relative;
    }

    .stage-img__img.is-hoverable {
        cursor: pointer;
    }

    .stage-img__img.is-responsive {
        display: flex;
        flex: none;
        margin: 0 auto;
        width: 950px;
    }

    .stage-img__img {
        display: block;
    }

    .artwork-modal__sidebar {
        padding: 20px 30px 30px;
        border-top: 1px solid #ececec;
    }

    .artwork-modal__copyright-tips {
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
        border-bottom: 1px solid #ececec;
        margin-bottom: 20px;
        font-size: 12px;
        color: #9b9b9b;
    }

    .artwork-modal__created-at {
        padding-right: 10px;
        margin-right: 10px;
        position: relative;
    }

    .artwork-modal__tag-more-artwork-wrapper {
        display: flex;
        -ms-flex: 1;
        flex: 1;
        position: relative;
        flex-direction: column;
        align-items: stretch;
    }

    .stage-flex-container {
        display: flex;
    }

    .stage-flex-container .is-vertical {
        flex-direction: column;
    }

    .artwork-modal__sidebar-title {
        color: #9b9b9b;
        font-size: 16px;
        line-height: 14px;
        margin-bottom: 10px;
    }

    .artwork-modal ul {
        padding-left: 0;
        list-style: none;
    }

    .artwork-modal li {
        display: inline-block;
    }

    .category-tag {
        color: #222222;
        padding: 0px 10px;
        font-size: 12px;
        border: 1px solid #adb3fb;
        border-radius: 40px;
        margin: 5px 5px 5px 5px;
        transition: .5s;
        cursor: pointer;
    }

    .works-comment {
        margin-top: 14px;
        padding: 24px 28px;
        background-color: #fff;
        border-radius: 20px;
    }

    .comment-form {
        display: flex;
    }

    .clearfix {
        zoom: 1;
    }

    .comment-btn {
        cursor: pointer;
        width: 116px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #adb3fb;
        border-radius: 0 4px 4px 0;
        color: #2d2d2d;
        font-size: 18px;
    }

    .comment-num {
        font-size: 16px;
        color: #1a1a1a;
        padding: 20px 0;
    }

    .comment-num span {
        color: #999;
        font-size: 14px;
    }

    .comment-li {
        display: flex;
        margin-bottom: 20px;
    }

    .user-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .c-face-img-con {
        display: inline-block;
        position: relative;
    }

    .c-face-img img {
        width: 100%;
        height: 100%;
    }

    .comment-wrap {
        flex: 1;
        margin-left: 20px;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }

    .user-name {
        font-weight: 700;
        color: #333;
        font-size: 14px;
    }

    .user-content {
        margin-top: 8px;
        color: #666;
        font-size: 14px;
        word-break: break-all;
    }

    .comment-info {
        padding: 14px 0 0;
        color: #999;
        font-size: 12px;
        display: flex;
    }

    .comment-time {
        flex-grow: 1;
    }

    .like-num {
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
    }

    .like-num span {
        margin-bottom: 2px;
        display: inline-block;
    }

    .artwork-modal__operator {
        position: absolute;
        left: 100%;
        width: 80px;
        height: 80px;
        font-size: 14px;
        background: #fff;
        border-radius: 0 8px 8px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        line-height: 1;
        color: #9b9b9b;
    }

    .artwork-modal__operator i {
        color: #d8d8d8;
        font-size: 32px;
        margin-bottom: 5px;
    }

</style>
